<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
    <h:head>
    	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    	<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    </h:head>
    <div class="container">
	<!-- Espaciado -->
	<br/><br/>
 	<!-- Contenido -->
 	
 	<h:form>
 	<h:dataTable value="#{productoCarroMB.listaCarro}" var="detalleCarro" styleClass="table table-condensed table-bordered table-hover">
    		<h:column>
        		<f:facet name="header">
           			<h:outputText value="Nombre" />
        		</f:facet>
        		<h:outputText value="#{detalleCarro.nombreDetalle}" />
    		</h:column>
    		<h:column>
        		<f:facet name="header">
           			<h:outputText value="Cantidad" />
        		</f:facet>
        		<h:commandButton styleClass="btn btn-success" value="-" action="#{productoCarroMB.restarCantidadCarro(detalleCarro)}"/>
        		<h:outputText value="#{detalleCarro.cantidad}" />
        		<h:commandButton styleClass="btn btn-success" value="+" action="#{productoCarroMB.sumarCantidadCarro(detalleCarro)}"/>
    		</h:column>
    		<h:column>
        		<f:facet name="header">
           			<h:outputText value="Total" />
        		</f:facet>
        		<h:outputText value="#{detalleCarro.totalDetalle}" />
    		</h:column>
    		<h:column>
        		<f:facet name="header">
           			<h:outputText value="Eliminar" />
        		</f:facet>
        			<h:commandButton styleClass="btn btn-success" value="Eliminar" action="#{productoCarroMB.eliminarDetalleCarro(detalleCarro)}"/>
    		</h:column>
    </h:dataTable>	
    		<h:commandButton styleClass="btn btn-success" value="Realizar Venta" action="#{productoCarroMB.realizarVenta}"/>
			<h:commandButton styleClass="btn btn-default" value="Volver" action="#{productoCarroMB.volverDeCarro}"/>
    </h:form>

    </div>
	<!-- Fin Contenido -->
</ui:composition>